<template>
  <view class="disFlx fz-14 default-color" :style="{ color, margin, padding }">
    <view class="disFlxAC mr-8 flex-shrink-0" :style="{ alignSelf: 'start', color: labelColor }">
      <!-- style="color: #969799" -->
      <text v-if="icon" class="ali-icon fz-16 mr-4">{{ icon }}</text>
      <text>{{ label }}</text>
    </view>
    <view class="break-all" :style="{ color: valueColor }">
      <slot>
        <text>{{ value }}</text>
      </slot>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import type { PropType, CSSProperties } from 'vue';

  defineProps({
    icon: propTypes.string,
    label: propTypes.string,
    labelColor: propTypes.string,
    value: propTypes.string,
    valueColor: propTypes.string,
    color: String as PropType<CSSProperties['color']>,
    margin: propTypes.string.def('0 0 24rpx 0'),
    padding: propTypes.string
  });
</script>

<style scoped></style>
